<template>
    <div>
      <n-card title="综合素质分管理" style="margin-bottom: 16px">
        <n-tabs type="line" v-model:value="tabValue">
          <n-tab-pane name="list" tab="学生综合素质分列表">
            <n-table :bordered="false" :single-line="false">
              <thead>
                <tr>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>思想政治分</th>
                  <th>身心健康分</th>
                  <th>劳动实践分</th>
                  <th>志愿服务分</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(stu, index) in scoreList" :key="index">
                  <td>{{ stu.stu_id }}</td>
                  <td>{{ stu.stu_name }}</td>
                  <td>{{ stu.sxzz }}</td>
                  <td>{{ stu.sxjk }}</td>
                  <td>{{ stu.ldsj }}</td>
                  <td>{{ stu.zyfw }}</td>
                  <td>
                    <n-button @click="toUpdate(stu)">修改</n-button>
                    <n-button @click="toDelete(stu)">删除</n-button>
                  </td>
                </tr>
              </tbody>
            </n-table>
            <n-pagination
              v-model:page="searchParams.page"
              :page-count="searchParams.pageCount"
              @update:page="loadstudy()"
            />
          </n-tab-pane>
          <n-tab-pane name="add" tab="添加学生">
            <n-form>
              <n-form-item label="学号">
                <n-input
                  v-model:value="addStudent.stu_id"
                  placeholder="请输入学号"
                />
              </n-form-item>
              <n-form-item label="姓名">
                <n-input
                  v-model:value="addStudent.stu_name"
                  placeholder="请输入姓名"
                />
              </n-form-item>
              <n-form-item label="思想政治分">
                <n-input
                  v-model:value="addStudent.sxzz"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="身心健康分">
                <n-input
                  v-model:value="addStudent.sxjk"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="劳动实践分">
                <n-input
                  v-model:value="addStudent.ldsj"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="志愿服务分">
                <n-input
                  v-model:value="addStudent.zyfw"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="">
                <n-button @click="add">提交</n-button>
              </n-form-item>
            </n-form>
          </n-tab-pane>
          <n-tab-pane name="update" tab="修改">
            <n-form>
              <n-form-item label="学号">
                <n-input
                  v-model:value="updateStu.stu_id"
                  placeholder="请输入学号"
                />
              </n-form-item>
              <n-form-item label="姓名">
                <n-input
                  v-model:value="updateStu.stu_name"
                  placeholder="请输入姓名"
                />
              </n-form-item>
              <n-form-item label="思想政治分">
                <n-input
                  v-model:value="updateStu.sxzz"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="身心健康分">
                <n-input
                  v-model:value="updateStu.sxjk"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="劳动实践分">
                <n-input
                  v-model:value="updateStu.ldsj"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="志愿服务分">
                <n-input
                  v-model:value="updateStu.zyfw"
                  placeholder="请输入成绩"
                />
              </n-form-item>
              <n-form-item label="">
                <n-button @click="update">提交</n-button>
              </n-form-item>
            </n-form>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import axios from "axios";
  import { useMessage } from "naive-ui";
  const message = useMessage();
  const router = useRouter();
  const route = useRoute();
  
  const searchParams = reactive({
    keyword: "",
    categoryId: "",
    page: 1,
    pageSize: 5,
    pageCount: 1,
  });
  
  const scoreList = ref([]); //学生列表数据
  const tabValue = ref("list");
  //学生班级分类选项内容
  const classOptions = ref([]);
  
  onMounted(() => {
    loadstudy(); //
  });
  //读取学生成绩列表
  const loadstudy = async () => {
    let res = await axios({
      method: "get",
      url: `/zhsz/list`,
    });
    scoreList.value = res.data.data;
    classOptions.value = scoreList.value.map((item) => {
      return { label: item.stu_class, value: item.stu_class };
    });
    console.log(classOptions);
    searchParams.pageCount =
      parseInt(res.data.data.length / searchParams.pageSize) +
      (res.data.data.length % searchParams.pageSize == 0 ? 0 : 1);
  };
  
  //学生添加数据
  const addStudent = reactive({
    stu_id: "",
    stu_name: "",
    xszz:0,
    sxjk:0,
    ldsj:0,
    zyfw:0
  });
  
  //修改学生成绩数据
  const updateStu = reactive({
    stu_id: "",
    stu_name: "",
    xszz:"",
    sxjk:"",
    ldsj:"",
    zyfw:""
  });
  
  const toUpdate = async (stu) => {
    tabValue.value = "update";
    updateStu.stu_id = stu.stu_id;
    updateStu.stu_name = stu.stu_name;
    updateStu.sxzz = stu.sxzz;
    updateStu.sxjk = stu.sxjk;
    updateStu.ldsj = stu.ldsj;
    updateStu.zyfw = stu.zyfw;
  };
  
  const update = async () => {
    let res = await axios({
      method: "put",
      url: "/zhsz/update",
      data: updateStu,
    });
    if (res.data.code == 200) {
      message.info(res.data.msg);
      loadstudy();
      tabValue.value = "list";
    } else {
      message.error(res.data.msg);
    }
  };
  
  
  //添加学生
  const add = async () => {
    let res = await axios({
      method: "post",
      url: "/zhsz/add",
      data: addStudent,
     
    });
    console.log(res);
    if (res.data.code == 200) {
      message.info(res.data.msg);
      loadstudy();
    } else {
      message.error(res.data.msg);
    }
  };
  
  //删除学生
  const toDelete = async (stu) => {
    let res = await axios({
      method: "delete",
      url: `/zhsz/delete/${stu.stu_id}`,
    });
    console.log(res);
    if (res.data.code == 200) {
      message.info(res.data.msg);
      loadstudy();
    } else {
      message.error(res.data.msg);
    }
  };
  </script>
  
  <style lang="scss" scoped></style>
  